<template>
  <transition>
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
  /*<transition>,对他下面的子标签(唯一)进行监听，当子标签发生改变时（常用的有v-if、v-show属性等），
  对 原始->改变结束 这个过程进行三个动作：
  1、在元素还没改变之前添加 v-enter、v-active 两个css属性:
     v-enter: 初始化元素的属性
     v-active: 添加动画效果，监听元素改变的属性(v-enter定义的)
  2、元素发生改变添加 v-enter-to css属性,去除v-enter css
     v-enter-to: 元素属性最终的定值
     这个时候v-active中的transition就监听到元素属性的发生的改变，使得这个改变在规定时间完成
  3、元素属性改变完成（transition中规定的时间完成）:移除v-active v-enter-to
  */
  .v-enter, .v-leave-to
    opacity: 0
  .v-enter-active, .v-leave-active
    transition: opacity .5s
  /*这里opacity默认值就是1，所以不用添加v-enter-to*/
</style>
